import React from 'react'
import {routes} from '../interface'
import {Switch,Route,Redirect} from 'react-router-dom'
interface RouterView {
    routes: routes[]
}
export default function RouterView(props:RouterView) {
    // 路由表
    const {routes} = props;
    // 组件列表
    const comList = routes.filter((item:routes) => item.component)
    // 重定向列表
    const redList = routes.filter((item:routes) => item.to)

    return (
        <Switch>
            {/* 路由组件 */}
            {comList.map((item:routes) => {
                return <Route key={item.path} path={item.path} render={(history:any) => {
                    return <item.component {...history} routes={item.children || []}></item.component>
                }}></Route>
            })}
            {/* 重定向 */}
            {redList.map((item:routes) => {
                return <Redirect to={item.to} from={item.from} key={item.to}></Redirect>
                // return <Redirect {...item} key={item.to}></Redirect>
            })}
        </Switch>
    )
}
